<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>值班安排表</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-grid>
        <ion-row>
          <ion-col v-for="day in days" :key="day">{{ day }}</ion-col>
        </ion-row>
        <ion-row v-for="(item, index) in schedule" :key="index">
          <ion-col v-for="(value, key) in item" :key="key">{{ value }}</ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>
 
<script setup>
import { IonPage,IonToolbar,IonTitle,IonHeader,IonContent,IonGrid,IonRow,IonCol } from '@ionic/vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import service from '@/api/api';
 
const route = useRoute();
const days = ref([]);
const schedule = ref([]);
 
onMounted(async () => {
  try {
    const response = await service.get(`/shift/calendar/${route.params.id}`);
    days.value = response.data.days;
    schedule.value = response.data.schedule;
  } catch (error) {
    console.error('An error occurred while fetching the schedule:', error);
  }
});
</script>

<!-- <template>
  <ion-page>
    <ion-toolbar></ion-toolbar>
    <ion-content>
      <ion-datetime :locale="'en'" presentation="date"></ion-datetime>
    </ion-content>
    
  </ion-page>
  
</template>

<script setup>
  import { IonDatetime,IonPage,IonToolbar,IonContent } from '@ionic/vue'; 
</script> -->